<template>
	<u-popup
		:show="showPopup"
		closeOnClickOverlay
		overlay
		round='10'
		closeable
		@close="showPopup=false"
		mode="bottom"
	>
	<view  style="margin: 0rpx;padding:1rpx" @touchmove.stop.prevent="() => {}">
		<view 
			style="text-align: center;padding: 20rpx;font-weight: bold;display:flex;justify-content: center;position:relative"
		>
			<view>
				模拟报名
			</view>
		</view>
		
		<swiper @touchmove.stop.prevent="() => {}" style="height: 1340rpx;" :current="currentSwiperItem" disable-touch="true" circular :indicator-dots="false" :autoplay="false" easing-function="easeInCubic" :duration="300">
				<swiper-item style="padding: 0;">
						<view style="padding-bottom: 50rpx;">
							<!-- 滚动视窗 -->
							<scroll-view scroll-y style="height: 1200rpx;">
								<view style="margin:15px 10px;">
									<view @click="selectAll(_enrolls,selecteds)" style="left:0;padding:5px 20px;border:solid 1rpx #eeeeee;border-radius: 4px;display: inline">
										全选
									</view>
								</view>
								<!-- 兼职卡片 -->
								<view v-for="(enroll,index) in _enrolls" @click="select(selecteds,enroll)" style="box-shadow: 0px 0px 10px 0px #66666645;border-radius:10rpx;display: flex;flex-direction:column;margin:15rpx;">
									<view style="flex: 1;display: flex;justify-content: space-between;padding: 20rpx;">
										<view style="flex: 1;display: flex;justify-content: space-between;align-items: center;">
											<u-avatar :src="absUrl(enroll.head_icon_url)" size="40" fontSize="34"></u-avatar>
											<view style="margin-left: 20rpx;">
													<view style="display: flex;flex-direction: column;font-size: 14px;justify-content: space-between;color: #363636;">
														<view style="display: flex;flex-direction: column;;align-items: center;padding: 0rpx 0;">
															<view style="margin: 2px;color: #888;">26岁</view>
															<view style="font-weight: bold;font-size: 16px;">{{enroll.name}}</view>
															<view>男</view>
														</view>
													</view>
											</view>
											<view style="margin-left: 20px;border-right: solid 1px #eee;height: 100%;"></view>
											<view style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;">
												<view style="color: #888;">
													{{enroll.id_number}}
												</view>
												<view style="font-weight: bold;font-size: 18px;padding: 20rpx 0;display: flex;align-items: center;">
													<view style="font-weight: bold;font-size: 16px;">{{enroll.phone_number}}</view>
												</view>
											</view>
										</view>
									
										<!-- 选择按钮 -->
										<view style="position: relative;border-radius: 100px;width: 40rpx;height: 40rpx;align-self: center;box-shadow: 0px 0px 6px 0px #66666665;" 
											:style="{
												border: isSelected(selecteds,enroll)?'none' : 'solid 1rpx #eee',
												backgroundColor: isSelected(selecteds,enroll) ? 'blueviolet' : 'transparent'
											}"
										>
											
											<view style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;display: flex;align-items: center;justify-content: center;">
												<u-icon name="checkmark" color="white"></u-icon>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						
						<view
							style="
								position: absolute;
								bottom: 0;
								right: 0;
								left: 0;
								display: flex;
								"
						>
							<button
							  :disabled="selecteds.length == 0"
							  @click="showVerifyModal=true"
							  class="cu-btn block lg"
							  style="
							  flex: 1;
								background-color: blueviolet;
								color: white;
								font-weight: bold;
								margin: 20rpx;
							">
								批量报名
							</button>
						</view>
						
						<u-modal 
							:show="showVerifyModal" 
							:showCancelButton="true" 
							title="操作确认" 
							content='是否确认报名'
							@confirm="showVerifyModal=false,commit()"
							@cancel="showVerifyModal=false"
						></u-modal>
				</swiper-item>
			</swiper>
	</view>
	</u-popup>
</template>

<script>
	import memberManager from './member-manager.js'
	
	export default {
		mixins:[memberManager],
		inject:['task'],
		data() {
			return {
				showVerifyModal:false,
				showPopup:false,
				currentSwiperItem:0,
				selecteds:[],
			}
		},
		computed:{
			_enrolls(){
				return this.enrolls //.filter(enroll=>enroll.verified_at?false:true)
			},
			state()
			{
				return (enroll)=>{
					let index = this.stateCode(enroll)
					let config = [
						{
							iconCls:'icon-tianxin_jianzhi_queren',
							cls:'state_ok',
							text:'已通过',
							click:null
						},
						{
							iconCls:null,
							cls:'state_raw',
							text:'同意',
							click:this.confirm
						},
						{
							iconCls:'icon-tianxin_jianzhi_yiyi',
							cls:'state_reject',
							text:'已拒绝',
							click:null
						},
					]
					
					return config[index]
				}
			}
		}, 
		methods:{
			async commit(){
				 
				uni.showLoading({
					title:'正在处理2'
				})
				
				for(let i=0;i<this.selecteds.length;i++)
				{ 
					let selected_id = this.selecteds[i]
					console.log(selected_id)
					let random = Math.floor(Math.random() * this.task.jobs.length)
					console.log(random)
					console.log(this.task)
					
					let res = await this.$http.post('/manager/job/enrolls/seed_create',{
						user_id: selected_id,
						job_task_id: this.task.id,
						expected_job_id: this.task.jobs[random].id
					})
					
					console.log(res)
					
					this.updateEnrolls(res.data)
					
					await new Promise((resolve)=>{
						setTimeout(()=>resolve(),300)
					})
				}
				
				uni.showToast({
					title:'处理成功'
				})
				
				setTimeout(()=>{
					this.showPopup = false
					this.currentSwiperItem = 0
					this.selecteds = []
				},1500)
			},
			async show(){
				let res = await this.$http.post('/manager/job/enrolls/seed_user')
				this.enrolls = res.data
				
				this.showPopup = true
				this.currentSwiperItem = 0
				
				
				this.selecteds = []
			}
		}
	}
</script>

<style scoped>
	/deep/ .uni-scroll-view {
		/* 在真正的滚动区域设置 阻断滚动穿透 */
		overscroll-behavior-y: contain !important;
	}
</style>